<template>
  <div>
    <!-- 编辑器容器 -->
    <div ref="editor" class="editor" :style="{ height: editorHeight }"></div>
  </div>
</template>

<script>
  // 导入 Ace 编辑器库
  import * as ace from 'ace-builds';

  export default {
    name: 'AceEditor', // 组件名称
    props: {
      value: {
        type: String,
        default: '' // 默认值为空字符串
      },
      mode: {
        type: String,
        default: 'C++' // 默认语言模式为 JavaScript
      },
      theme: {
        type: String,
        default: 'github' // 默认主题为 GitHub
      },
      editorHeight: {
        type: String,
        default: '89vh' // 默认编辑器高度为 500 像素
      }
    },
    mounted() {
      // 组件挂载后初始化编辑器
      this.initEditor();
    },
    methods: {
      initEditor() {
        // 创建 Ace 编辑器实例
        this.editor = ace.edit(this.$refs.editor);
        // 设置编辑器主题
        this.editor.setTheme(`ace/theme/${this.theme}`);
        // 设置编辑器语言模式
        this.editor.getSession().setMode(`ace/mode/${this.mode}`);
        // 设置编辑器初始值，不触发 change 事件
        this.editor.setValue(this.value, -1);
        console.log(document.getElementById('editor'))
        // 监听编辑器内容变化事件
        this.editor.on('change', () => {
          // 当内容变化时，向父组件发出 input 事件，传递当前值
          this.$emit('input', this.editor.getValue());
        });
      },
      beforeDestroy() {
        // 组件销毁前，销毁编辑器实例，释放资源
        if (this.editor) {
          this.editor.destroy();
        }
      }
    }
  };
</script>

<style scoped>
  .editor {
    height: 100%;
    /* 设置容器高度为100%，使其尽可能填满其父元素的空间 */
    width: 100%;
    /* 设置编辑器的宽度为其父元素的100% */
    border: 1px solid hsl(224, 12%, 76%);
    /* 设置边框颜色 */
    border-radius: 2px;
    /* 设置边框圆角 */
    overflow: auto;
    /* 允许内容溢出时出现滚动条 */
    background-color: #f9f9f9;
    /* 设置编辑器的背景颜色 */
    color: #292828;
    /* 设置编辑器的字体颜色 */
  }
</style>